<template>
	<view class="page">
		<u-sticky bgColor="#fff">
			 <u-tabs :list="utabs"  @change="tabChange" :current="active" :scrollable="false"></u-tabs>
		</u-sticky>
		<view v-if="active===0" style="display: flex;flex-wrap: wrap;width: 740rpx;margin: 20rpx auto;">
			<view v-for="item in resetData" style="width: 320rpx;margin: 25rpx;" @tap="toTrain(item)">
				<img :src="item.icon_url" alt="" style="width: 320rpx;height: 317rpx;border-radius: 18rpx;">
				<view class="item-title line1">{{item.title}}</view>
				<view class="item-dec line1">{{parseInt(item.audio_duration/60)}}分钟 冥想引导</view>
			</view>
		</view>
		<view v-if="active===1" style="display: flex;flex-wrap: wrap;width: 740rpx;margin: 20rpx auto;">
			<view v-for="item in noiseData" style="width: 320rpx;margin: 25rpx;" @tap="toTrain(item)">
				<img :src="item.icon_url" alt="" style="width: 320rpx;height: 317rpx;border-radius: 18rpx;">
				<view class="item-title line1">{{item.title}}</view>
				<view class="item-dec line1">{{parseInt(item.audio_duration/60)}}分钟 冥想引导</view>
			</view>
		</view>
		<view v-if="active===2" style="display: flex;flex-wrap: wrap;width: 740rpx;margin: 20rpx auto;">
			<view v-for="item in seelpData" style="width: 320rpx;margin: 25rpx;" @tap="toTrain(item)">
				<img :src="item.icon_url" alt="" style="width: 320rpx;height: 317rpx;border-radius: 18rpx;">
				<view class="item-title line1">{{item.title}}</view>
				<view class="item-dec line1">{{parseInt(item.audio_duration/60)}}分钟 冥想引导</view>
			</view>
		</view>
		
		<view v-if="active===3" style="display: flex;flex-wrap: wrap;width: 740rpx;margin: 20rpx auto;">
			<view v-for="item in trains" style="width: 320rpx;margin: 25rpx;" @tap="toTrain(item)">
				<img :src="item.icon_url" alt="" style="width: 320rpx;height: 317rpx;border-radius: 18rpx;">
				<view class="item-title line1">{{item.title}}</view>
				<view class="item-dec line1">{{parseInt(item.audio_duration/60)}}分钟 冥想引导</view>
			</view>
		</view>
		</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		computed: {
			...mapState(['member']),
		},
		data() {
			return {
				imei:"",
				list3: [
					'https://cdn.uviewui.com/uview/swiper/swiper3.png',
					'https://cdn.uviewui.com/uview/swiper/swiper2.png',
					'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				],
				trainData:[],
				noiseData:[],
				resetData:[],
				seelpData:[],
				active: 0,
				utabs:[
					{name:'冥想放松'},
					{name:'舒服放松'},
					{name:'睡前故事'},
					{name:'自由练习'}
				],
				trains:[{
					title:"自由练习",
					icon_url:"https://baxztech.com/bian_admin_api/public/bianmp/card4.png",
					intro:"如果您是一位有经验的练习者并自备了训练材料， 请进行自由练习，彼馨将为您全程记录情绪数据。 ",
					audio_duration:3600,
					audio_id:'bian_0',
					location:1,
					freedom:1
				},
				{
					title:"美人技术",
					audio_id:'bian_1',
					icon_url:"https://baxztech.com/bian_admin_api/public/bianmp/card3.png",
					intro:" 美人技术是动力沟通理论指导下的特有的以增进自我觉察为目的技术。美人技术是综合性的技术，强调存在、体验、行动、理解、目标和肯定这六个要素，按照这六个维度进行练习，面容和心灵会越来越美丽，越来越安详，越来越能觉察自己的内部的欲望、需要、情感和冲突，也越来越能觉察周围他人的欲望、需要、情感和冲突，与周围的人、事和环境会越来越协调、越来越有创造性。  ",
					audioUrl:"https://baxztech.com/bian_admin_api/public/audio/美人技术.mp3",
					audio_duration:420,
					location:1
				},
				{
					title:"正念冥想",
					audio_id:'bian_2',
					icon_url:"https://baxztech.com/bian_admin_api/public/bianmp/train1.jpg",
					audioUrl:"https://baxztech.com/bian_admin_api/public/audio/正念冥想.mp3",
					intro:" 正念是指对当下体验的有意识的非评价的觉察，强调对此时此地实际身心感受接纳与觉知，并且鼓励不在这种接纳和觉知中加入评判。",
					audio_duration:582,
					location:1
				}],
			}
		},
		onLoad() {
			this.imei = this.member.imei || ''
			uni.$u.http.post('/client/serviceResource',{
				data:"{\"recommend_type\":1,\"recommend_size\":6}",
				method:"heartide.bixin.audio.recommend"
			}).then(res =>{
				if(res.code == "0"){
					let data = JSON.parse(res.data)
					this.imei = "1"
					this.resetData = data;
					// this.$store.state.trainList = data;
				}
			})
			// uni.$u.http.post('/client/serviceResource',{
			// 	"data":"{\"type_id\":8,\"page_size\":6,\"page\":1}",
			// 	"method":"heartide.bixin.audio.list"
			// },{
			// 	 header: {
			// 		 appId:'bixin_openApi_v1', 
			// 		 appKey:'KlaWySuV_j1JcLa-X3UI'
			// 	 }
			// }).then(res =>{
			// 	if (res.code == '0') {
			// 		let data = JSON.parse(res.data).data_list;
			// 		this.imei = "1"
			// 		this.$store.state.noiseList = data;
			// 		this.noiseData = data.slice(0,3);
					
			// 	}
			// })
			
			
		},
		methods: {
			tabChange(n, t) {
				this.active = n.index;
				if (n.index == 1) {
					if(this.noiseData.length){
						return;
					}
					uni.$u.http.post('/client/serviceResource',{
						"data":"{\"type_id\":6,\"page_size\":6,\"page\":1}",
						"method":"heartide.bixin.audio.list"
					},{
						 header: {
							 appId:'bixin_openApi_v1',
							 appKey:'KlaWySuV_j1JcLa-X3UI'
						 }
					}).then(res => {
						if (res.code == '0') {
							let list = JSON.parse(res.data).data_list;
							if(list.length){
								this.noiseData = list;
							}
						}
					}).catch(e => {
						this.$toast("网络连接失败！")
					})
				}
				if (n.index == 2) {
					if(this.seelpData.length){
						return;
					}
					uni.$u.http.post('/client/serviceResource',{
						"data":"{\"type_id\":7,\"page_size\":6,\"page\":1}",
						"method":"heartide.bixin.audio.list"
					},{
						 header: {
							 appId:'bixin_openApi_v1',
							 appKey:'KlaWySuV_j1JcLa-X3UI'
						 }
					}).then(res => {
						if (res.code == '0') {
							let list = JSON.parse(res.data).data_list;
							if(list.length){
								this.seelpData = list;
							}
						}
					}).catch(e => {
						this.$toast("网络连接失败！")
					})
				}
			},
			navigatorCheck(url) {
				if(this.member.phone){
					uni.navigateTo({
						url: url
					})
				}else{
					uni.navigateTo({
						url: '/pagesA/pages/login/login'
					})
				}
			},
			toTrain(d){
				if(this.member.phone){
					uni.navigateTo({
						url:'/pagesA/pages/audio/audio',
						success: (res) => {
							res.eventChannel.emit('datas', d)
						}
					})
				}else{
					uni.navigateTo({
						url: '/pagesA/pages/login/login'
					})
				}
			},
			testList() {
				uni.navigateTo({
					url:'/pagesA/pages/testMain/testList',
					success: (res) => {
						res.eventChannel.emit('datas', {})
					}
				})
			},
		}
	}
</script>

<style lang='less' scoped>
	.service {
		padding: 16px;
		/* padding-bottom: 60px; */
	}
	.server-item {
		border-radius: 10px;
		background-color: #fff;
		margin-bottom: 10px;
		box-shadow: 4rpx 8rpx 16rpx #a4aede2e;
	}
	.item-title{
		font-size: 28rpx;
		color: #333333;
		line-height: 40.8rpx;
	}
	.item-dec{
		color: #aaaaaa;
		font-size: 19.6rpx;
	}
	.train-content {
		padding: 12px;
		display: flex;
		justify-content: space-between;
	}

	.train {
		width: 32%;
	}
	.train-pic {
		position: relative;
		border-radius: 10px;
	}

	.train-pic img {
		display: block;
		width: 100%;
		height: 100px;
		border-radius: 10px;
	}

	.train-tag {
		position: absolute;
		right: 0px;
		top: 0px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		font-size: 12px;
		color: #fff;
		padding: 0px 7px;
		border-radius: 0px 10px 0px 10px;
	}

	.train-name {
		padding-top: 8px;
		height: 18px;
		line-height: 18px;
		text-align: center;
		font-size: 14px;
		color: #333;
		overflow: hidden;
	}

	.title-text {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 34rpx;
		font-weight: 700;
		color: #333;
	}

	.test-tag {
		position: absolute;
		right: 0px;
		top: 0px;
		height: 20px;
		line-height: 20px;
		text-align: center;
		font-size: 12px;
		color: #fff;
		padding: 0px 7px;
		border-radius: 0px 10px 0px 10px;
		background-color: rgba(0, 0, 0, 0.5);
	}
</style>
